<template>
  <div class="journalismManagement">
    <Header />
    <div class="image">
      <div class="image-wrap">
        <img src="../../assets/image/fast-reg.png" alt="" />
        <div></div>
      </div>
    </div>
    <p>新闻管理</p>
    <div class="accuont-table">
      <el-button type="primary" style="float:right;margin-bottom:10px" @click="getJournalismAdd" >发布新闻资讯</el-button>
      <el-table :data="journalismList" border style="width: 100%" max-height="400">
        <el-table-column prop="jid" label="新闻id" width="80" align="center"> </el-table-column>
        <el-table-column prop="jtitle" label="新闻标题" width="250" align="center">
        </el-table-column>
        <el-table-column prop="jimg" label="新闻配图" width="200" align="center">
          <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image 
              style="width: 150px; height: 100px"
              :src="scope.row.jimg" 
              :preview-src-list="srcList">
            </el-image>
          </div>
        </template>
        </el-table-column>
        <el-table-column prop="jdate" label="新闻发布时间" width="120" align="center">
        </el-table-column>
        <el-table-column prop="jauthor" label="新闻作者" width="120" align="center">
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getJournalismDelete(scope.row, scope.$index)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="getJournalismEdit(scope.row, scope.$index)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 招聘信息编辑弹窗 -->
    <el-dialog title="编辑新闻资讯" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="journalismEdit" >
        <el-form-item label="新闻标题" :label-width="formLabelWidth">
          <el-input v-model="journalismEdit.jtitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新闻图片" :label-width="formLabelWidth">
          <!-- <el-input v-model="journalismEdit.jimg" autocomplete="off"></el-input> -->
          <input type="file" @change="handleChangeEdit" />
          <div class="demo-image__preview">
            <el-image 
              style="width: 130px; height: 100px"
              :src="imageUrlEdit" 
              v-if="imageUrlEdit !== ''"
              >
            </el-image>
          </div>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input v-model="journalismEdit.jauthor" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新闻内容" :label-width="formLabelWidth">
          <el-input v-model="journalismEdit.jcontent" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="getJournalismEditConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 招聘信息发布弹窗 -->
    <el-dialog title="发布新闻资讯" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="journalismAdd">
        <el-form-item label="新闻标题" :label-width="formLabelWidth">
          <el-input v-model="journalismAdd.jtitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新闻图片" :label-width="formLabelWidth">
          <!-- <el-input v-model="journalismAdd.jimg" autocomplete="off"></el-input> -->
          <input type="file" @change="handleChange" />
          <div class="demo-image__preview">
            <el-image 
              style="width: 130px; height: 100px"
              :src="imageUrl" 
              v-if="imageUrl !== ''"
              >
            </el-image>
          </div>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input v-model="journalismAdd.jauthor" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新闻内容" :label-width="formLabelWidth">
          <el-input v-model="journalismAdd.jcontent" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="getJournalismAddConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from '../../components/Header/index'
export default {
  name: 'journalismManagement',
  components: {
    Header,
  },
  data() {
    return {
      journalismList: [],
      srcList: [],
      dialogFormVisibleEdit:false,
      // 编辑新闻资讯
      journalismEdit: {
        jtitle: '', // 新闻资讯标题
        jimg: '', // 新闻资讯配图
        jauthor: '', // 作者
        jcontent: '', // 新闻资讯内容
      },
      dialogFormVisibleAdd:false,
      // 发布新闻资讯
      journalismAdd: {
        jtitle: '', // 新闻资讯标题
        jimg: '', // 新闻资讯配图
        jauthor: '', // 作者
        jcontent: '', // 新闻资讯内容
      },
      formLabelWidth: '120px',
      Index: '',
      row: [],
      imgUrl: [
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism1.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism2.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism3.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism4.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism5.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism6.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism7.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism8.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism9.jpg',
        'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism10.jpg',
      ],
      baseUrl: '',
      fileName: '',
      imageUrl: '',
      baseUrlEdit: '',
      fileNameEdit: '',
      imageUrlEdit: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getJournalism()
  },
  mounted() {},
  methods: {
    // 获取新闻资讯数据
    getJournalism() {
      this.$request.get('/api/api/Journalism/GetInfo').then((res) => {
        // console.log(res)
        // this.journalismList = res
        this.journalismList = res.data.reverse()
      })
    },
    // 删除新闻资讯
    getJournalismDelete(row, index) {
      console.log(row, index);
      const data = {
        jid: row.jid
      }
      this.$request.post('/api/api/Journalism/Del',data).then((res) => {
        // console.log(res)
        this.getJournalism()
      })
    },
    // 编辑新闻资讯
    getJournalismEdit(row, index) {
      // console.log(row, index);
      this.dialogFormVisibleEdit = true
      this.row = row
      this.journalismEdit = JSON.parse(JSON.stringify(row))
      this.imageUrlEdit = row.jimg
    },
    // 编辑弹出框上传图片
    handleChangeEdit(event) {
      let baseUrl = 'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/'
        let file = event.target.files[0];
        // console.log(file);
        this.baseUrlEdit = baseUrl
        this.fileNameEdit = file.name
        this.imageUrlEdit = this.baseUrlEdit + this.fileNameEdit
    },
    // 编辑新闻资讯确定按钮
    getJournalismEditConfirm() {
      this.dialogFormVisibleEdit = false
      const data = {
        jid: this.row.jid,
        jtitle: this.journalismEdit.jtitle, // 新闻资讯标题
        jimg: this.imageUrlEdit, // 新闻资讯配图
        jauthor: this.journalismEdit.jauthor, // 作者
        jcontent: this.journalismEdit.jcontent, // 新闻资讯内容
        jdate: this.row.jdate // 发布时间
      }
      // console.log(data);
      this.$request.post('/api/api/Journalism/Update',data).then((res) => {
        // console.log(res)
        this.getJournalism()
        this.imageUrlEdit = ''
      })
    },
    // 发布新闻资讯
    getJournalismAdd() {
      this.dialogFormVisibleAdd = true
    },
    // 发布弹出框上传图片
    handleChange(event) {
      let baseUrl = 'https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/'
        let file = event.target.files[0];
        // console.log(file);
        this.baseUrl = baseUrl
        this.fileName = file.name
        this.imageUrl = this.baseUrl + this.fileName
    },
    // 发布新闻资讯确认按钮
    getJournalismAddConfirm() {
      this.dialogFormVisibleAdd = false
      let date = new Date().toLocaleDateString().split('/').join('-')
      // console.log(JSON.stringify(date));
      const data = {
        jtitle: this.journalismAdd.jtitle, // 新闻资讯标题
        jimg: this.imageUrl, // 新闻资讯配图
        jauthor: this.journalismAdd.jauthor, // 作者
        jcontent: this.journalismAdd.jcontent, // 新闻资讯内容
        jdate: date, // 新闻资讯发布时间
      }
      // console.log(data);
      this.$request.post('/api/api/Journalism/Add',data).then((res) => {
        // console.log(res)
        this.getJournalism()
        setTimeout(() => {
          this.imageUrl = ''
        },3000)
      })
    }
  },
}
</script>
<style scoped>
.journalismManagement{
  width: 100%;
  height: 100%;
  background-color: #f6f6f8;
  padding-bottom: 60px;
}
.image {
  width: 100%;
  height: 120px;
  background-color: #5dd5cb;
}
.image-wrap {
  width: 1084px;
  margin: auto;
}
.image-wrap img {
  width: 354px;
  height: 120px;
}
.journalismManagement p{
  text-align: center;
  margin-top: 40px;
  margin-bottom: -10px;
  font-size: 20px;
}
.accuont-table {
  width: 890px;
  height: 400px;
  margin: auto;
  margin-bottom: 30px;
  /* overflow: auto; */
}
</style>